$(document).ready(function() {
	$("#receiptdate").datepicker({
		maxDate : "+0M +0D"
	});
	displayImage($('#receiptUploadId').val());
	
	$("#receiptcategory").autocomplete({
		source : "recCategory/searchCategories",
		select : function(event, ui) {
			$("#categoryid").val("" + ui.item.id);
		}
	});
	$("#retailer").autocomplete({
		source : "retailer/searchRetailers",
		select : function(event, ui) {
			$("#retailerid").val("" + ui.item.id);
		}
	});
	$("#receiptheaderForm").validator().submit(function f(event) {
		application.clearMessage();
		if(!event.isDefaultPrevented()) {
			$.ajax({
				type : 'POST',
				url : "rec/saveReceipt.json",
				data : $("#receiptheaderForm").serialize(),
				datatype : "json",
				success : function(response) {
					application.showSuccessMessage(response.message);
					$("#receiptId").val("" + response.object.id);

				},
				error : function(response, ajaxOptions, thrownError) {
					application.showErrorMessage(response.message);
				}
			});
			event.preventDefault();
		} else {
			event.preventDefault();
			application.clearMessage();
			application.showErrorMessage("Please correct the below form errors");
		}
	});

	$("#viewReceiptUploadedTable").jqGrid({
		url : 'recUpload/viewUploadedReceipts',
		// editurl: 'rec/delete',
		datatype : "json",
		colNames : ['ID', /* 'URL', */
		'Receipt', 'Date'],
		colModel : [{
			name : 'id',
			index : 'id',
			width : 10,
			editable : false,
			editoptions : {
				readonly : true,
				size : 10
			},
			hidden : true
		}, {
			name : 'receiptURL',
			index : 'receiptURL',
			/* datefmt: 'dd/mm/yyyy', */
			formatter : receiptImageFormatter,
			width : 10,
			align : 'center',
			editrules : {
				date : true
			}
		}, /*
		 * { name : 'receiptURL', index : 'receiptURL',
		 * formatter : 'showlink', formatoptions : {
		 * baseLinkUrl : '#' }, width : 60 },
		 */
		{
			name : 'uploadedDate',
			index : 'uploadedDate',
			datefmt : 'dd/mm/yyyy',
			formatter : 'date',
			formatter : receiptDateFormatter,
			width : 10,
			align : 'right',
			editrules : {
				date : true
			}
		} /*
		 * , { name : 'userPID', index : 'userPID', width :
		 * 100, align : 'right' }
		 */],
		pager : '#pager',
		rowNum : 10,
		rowList : [10, 20, 30],
		sortname : 'id',
		width : 200,
		height : 480,
		sortorder : 'desc',
		viewrecords : true,
		emptyrecords : 'No Records found',
		gridview : true,
		jsonReader : {
			repeatitems : false
		},
		onSelectRow : function(id) {
			displayImage(id);
		}
		/*
		 * , caption : 'View uploaded images'
		 */
	});
	$("#viewReceiptUploadedTable").jqGrid('navGrid', '#pager', {
		edit : false,
		add : false,
		del : true,
		search : true
	}, {}, {}, {
		url : 'recUpload/delete'
	});

	$("#viewReceiptUploadedTable").navButtonAdd('#pager', {
		caption : 'Delete',
		buttonicon : 'ui-icon-thrash',
		onClickButon : deleteRow,
		position : 'last',
		cursor : pointer
	});
	
	

	function openWindow(cellvalue) {
		// alert('hi - opening window: ' + cellvalue);
	}

	function receiptDateFormatter(cellvalue, options, rowObject) {
		return new Date(cellvalue);
	}

	function receiptImageFormatter(cellvalue, options, rowObject) {
		return "<img src='" + cellvalue + "',draggable='true', ondragstart='drag(event)' alt='" + cellvalue + "', title='image title hi' height=40, width=40></img>";
	}

	function deleteRow(obj, args) {
		// alert('deleting..');
	}

	function displayImage(id) {
		// var selectedImageURL = $('#viewReceiptUploadedTable').getCell(id, "receiptURL");

		$.ajax({
			url : "recUpload/getReceiptUpload/" + id + ".json",
			success : function(response) {
				$('#billpreview').empty();
				$('#receiptUploadId').val("" + id);
				$('#billpreview').append("<br>" + "<img src='" + response.receiptURL + "' width='280' height='580'></img>");
			}
		});
	}

});
